<template>
    <div class="">
        <b-carousel id="carousel1"
                style="text-shadow: 1px 1px 2px #333;"
                controls
                indicators
                :interval="3000"
                v-model="slide"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd"
        >

            <b-carousel-slide >
                <img slot="img" class="d-block img-fluid"
                    src="@/customization/carousel/jiudian1.jpg" alt="image slot" >
            </b-carousel-slide>
            <b-carousel-slide >
                <img slot="img" class="d-block img-fluid"
                    src="@/customization/carousel/jiudian2.jpg" alt="image slot">
            </b-carousel-slide>
            <b-carousel-slide >
                <img slot="img" class="d-block img-fluid"
                    src="@/customization/carousel/jiudian3.jpg" alt="image slot">
            </b-carousel-slide>
            <b-carousel-slide>
                <img slot="img" class="d-block img-fluid" 
                    src="@/customization/carousel/jiudian4.jpg" alt="image slot">
            </b-carousel-slide>

        </b-carousel>
    </div>
</template>
<script>
import Vue from 'vue'
export default {
    data () {
        return {
            slide: 0,
            sliding: null
        }
    },
    methods: {
        onSlideStart (slide) {
            this.sliding = true
        },
        onSlideEnd (slide) {
            this.sliding = false
        }
    }
}

</script>

<style scoped lang="scss">
#carousel1{
    width: 10rem;
    height: 7rem;
    margin: 0.5rem auto;
}
.d-block{
    width: 10rem;
    height: 5.5rem;
}
/* .carousel-indicators2 {
    position: absolute;
    right: 0;
    bottom: -2.2rem;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}
.carousel-indicators li {
    box-sizing: content-box;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #B49D7E;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity 0.6s ease;
}
.carousel-control-prev {
    left: -104px;
}
.carousel-control-next {
    right: -104px;
}
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 15%;
    color: #B49D7E;
    text-align: center;
    opacity: 0.5;
    transition: opacity 0.15s ease;
} */
</style>
